<template>
  <div
    class="blessing-message-card"
    :class="{ 'has-image': !!image_url }"
    data-aos="fade-up"
  >
    <div class="message-card" :style="colorSet">
      <div class="message-card__wrapper">
        <div class="message-card__head">
          <div v-show="image_url" class="message-card__image">
            <img :src="image_url" :alt="name" />
          </div>
          <h5
            class="message-card__name text-uppercase"
            v-html="name"
          ></h5>
          <div
            v-show="personTypeLabel"
            class="message-card__label"
            v-html="personTypeLabel"
          ></div>
        </div>
        <div class="message-card__body" v-html="message"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  name: 'BlessingMessageCard'
})

interface Props {
  image_url?: string
  name?: string
  person_type?: string
  label?: string
  message?: string
  type?: number
}

const props = withDefaults(defineProps<Props>(), {
  image_url: '',
  name: '',
  person_type: '',
  label: '',
  message: '',
  type: 0
})

const colorSet = computed(() => {
  const myType = props.type % 3
  const colorMap = [
    {
      '--bg-color': '#0032A0',
      '--border-color': '#FF0044',
    },
    {
      '--bg-color': '#FF8200',
      '--border-color': '#0032A0',
    },
    {
      '--bg-color': '#FF0044',
      '--border-color': '#D2D6DC',
    },
  ]
  return colorMap[myType]
})

const personTypeList = computed(() => [
  {
    key: 'parent',
    name: '家长',
    value: '家长',
  },
  {
    key: 'alumni',
    name: '校友',
    value: '校友',
  },
  {
    key: 'student',
    name: '学生',
    value: '学生',
  },
  {
    key: 'faculty-staff',
    name: '教学人员/行政人员',
    value: '教学人员/行政人员',
  },
  {
    key: 'others',
    name: '其他',
    value: '其他',
  },
])

const personTypeLabel = computed(() => {
  if (props.person_type === 'others') return props.label
  return (
    personTypeList.value.find((v: any) => v.key === props.person_type)?.name ?? props.label
  )
})
</script>

<style lang="scss" scoped>
.blessing-message-card {
  cursor: pointer;
}

.blessing-message-card:hover .message-card {
  transform: scale(0.95);
}

.blessing-message-card.has-image {
  padding-top: 59px;
}

@media (max-width: 767.98px) {
  .blessing-message-card.has-image {
    padding-top: 40px;
  }
}

.blessing-message-card.has-image .message-card__wrapper {
  padding-top: 51px;
}

@media (max-width: 767.98px) {
  .blessing-message-card.has-image .message-card__wrapper {
    padding-top: 44px;
  }
}

.message-card {
  position: relative;
  padding: 21px;
  background-color: var(--bg-color);
  border-radius: 10px;
  width: 100%;
  transform: scale(1);
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

@media (max-width: 767.98px) {
  .message-card {
    padding: 12px;
  }
}

.message-card__wrapper {
  padding: 37px 34px;
  border: 1.3px solid var(--border-color);
  border-radius: 10px;
  color: #ffffff;
  transition: border 0.3s ease-in-out;
}

@media (max-width: 767.98px) {
  .message-card__wrapper {
    padding: 30px 12px 20px;
    border-radius: 0;
  }
}

.message-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message-card__image {
  position: absolute;
  left: 50%;
  top: -59px;
  transform: translate(-50%, 0);
}

@media (max-width: 767.98px) {
  .message-card__image {
    top: -40px;
  }
}

.message-card__image img {
  width: 118px;
  height: 118px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767.98px) {
  .message-card__image img {
    width: 80px;
    height: 80px;
  }
}

.message-card__name {
  padding-bottom: 6px;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .message-card__name {
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: 0.02em;
  }
}

.message-card__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 767.98px) {
  .message-card__label {
    line-height: 1.79;
    font-size: 16px;
  }
}

.message-card__label::before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 2px;
  background-color: #ffffff;
  margin-bottom: 6px;
  border-radius: 2px;
}

.message-card__body {
  margin-top: 21px;
  height: calc(1.38em * 4);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .message-card__body {
    margin-top: 9px;
    height: unset;
    max-height: calc(1.5em * 5);
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
}

.message-card__body,
.message-card__body :deep(*) {
  font-size: 20px;
  line-height: 1.38;
  font-weight: 400;
}

@media (max-width: 767.98px) {
  .message-card__body,
  .message-card__body :deep(*) {
    font-size: 16px;
    line-height: 1.5;
  }
}
</style>